<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
	</head>
	<body>
		<button id="bt">提交</button>
		<input id="input" type="text">
	</body>
	<script>
		let bt = document.getElementById('bt');
		let input = document.getElementById('input');

		function debounce(fn, time, isImmediately) { //要执行的方法，间隔时间，是否立即执行
			let isTrue = isImmediately

			//初始化定时器对象
			let clock = null

			return function() {
				//是否是立即首次执行
				if (isTrue) {
					fn.call(this)

					// 执行后改变立即执行的状态
					isTrue = false
				} else {

					// 清除上一次的定时器，否则连点后多个定时器会集中触发（关键）
					clearTimeout(clock)
					clock = setTimeout(() => {
						fn.call(this)

						// 这里如果直接使用调用这个方法的话，在fn这个方法是拿不到调用者的this
						// fn()  
					}, time)

				}
			}
		}


		// 要执行提交的方法 postData
		function postData() {
			console.log('提交了')
			// 这里就能拿到调用者的this,因为在触发该方法的函数中使了call调用将this指向了调用者
			console.log(this)
		}

		// 要执行搜索的方法 searchData
		function searchData() {
			console.log('搜索了')
			// 这里就能拿到调用者的this,因为在触发该方法的函数中使了call调用将this指向了调用者
			console.log(this)
		}

		// 使用阻止频繁的连击提交或者获取一些数据
		// 对象.addEventListener('触发方式',debounce(要执行的方法吗,间隔时间（毫秒）,是否立即触发（true,false）))

		bt.addEventListener('click', debounce(postData, 500, true))


		//使用在输入框中输入时执行搜索

		input.addEventListener('input', debounce(searchData, 300, false))
	</script>
</html>